<!--  -->
<template>
  <div class="expire-day">
    <div class="anov-modal-icon-wrapper">
      <div class="anov-modal-circle-o"></div>
      <div class="anov-modal-circle-i"></div>
      <i class="platformicon icon_jinggao anov-modal-icon"></i>
    </div>
    <div class="expire-day-wrapper">
      <p class="anov-expire-label">{{ label }}</p>
      <p class="anov-expire-text">
        <span>本项目许可证有效期至</span>{{ dueDate }}<span>，还有</span
        >{{ expireDay }}天<span>到期</span>
      </p>
      <p class="anov-expire-text">
        <span>为避免影响您后续使用，请尽快</span><i>联系我们</i
        ><span>，获取新的许可证</span>
      </p>
    </div>
    <div class="anov-modal-btn" @click="validBtn">
      {{ $t('cmlpanel.stop') }}
    </div>
  </div>
</template>

<script>
import * as anov from 'anov-core'
export default {
  name: 'expireDay',
  components: {},
  data() {
    return {
      label: '温馨提示'
    }
  },
  computed: {
    ...anov.licenseServer.mapState(['expireDay', 'dueDate'])
  },
  watch: {},
  methods: {
    init() {
      let _this = this
      this.tl = new TimelineMax({
        autoRemoveChildren: true,
        onStart: function () {}
      })
      let tw1 = TweenMax.to('.expire-day', 0.3, { opacity: 1 })
      let tw4 = TweenMax.to('.expire-day .anov-modal-icon-wrapper', 0.3, {
        scale: 1,
        opacity: 1,
        ease: Power0.easeInOut
      })
      let tw5 = TweenMax.to('.expire-day .anov-modal-icon', 0.2, {
        opacity: 1,
        scale: 1
      })
      let tw8 = TweenMax.to('.expire-day .expire-day-wrapper', 0.3, {
        opacity: 1
      })
      let tw9 = TweenMax.to('.expire-day .anov-modal-btn', 0.3, { opacity: 1 })
      this.tl.addLabel('start')
      this.tl
        .add(tw1, 'start+=0')
        .add(tw4, 'start+=0.1')
        .add(tw5, 'start+=0.2')
        .add(tw8, 'start+=.4')
        .add(tw9, 'start+=.4')
    },
    reset() {
      this.tl.reverse()
      TweenMax.set('.expire-day', { opacity: 0 })
      TweenMax.set('.expire-day .anov-modal-icon-wrapper', {
        scale: 0,
        opacity: 0
      })
      TweenMax.set('.expire-day .anov-modal-icon', { opacity: 0, scale: 0 })
      TweenMax.set('.expire-day .anov-modal-btn', { opacity: 0 })
    },
    destroy(params) {
      this.reset()
      if (typeof params.onClose == 'function') {
        params.onClose()
      }
    },
    validBtn() {
      app.modal.destroy({ componentsName: 'expireDay' })
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.expire-day {
  opacity: 0;
}
.expire-day-wrapper {
  margin-top: 50px;
  text-align: center;
}
.anov-expire-label {
  font-size: 22px;
  margin-bottom: 20px;
}
.anov-expire-text {
  line-height: 30px;
  font-size: 20px;
  span {
    font-size: 16px;
    color: #fff;
  }
  i:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>
